import React from 'react';
import { connect } from 'dva';
import { Table, Pagination, Popconfirm, Button } from 'antd';
import { routerRedux } from 'dva/router';
import styles from './Module.css';
import { PAGE_SIZE } from '../../constants';
import ModuleEditModal from './ModuleEditModal';

const ModuleTable = ({ dispatch, datas: dataSource, loading, pageSize , pageNumber:current , totalPage:total }) => {

  function pageChangeHandler(pageNumber) {
    dispatch({
      type : 'Module/fetch' ,
      payload: { pageNumber },
    });
  }

  function deleteHandler(values){
    debugger
    dispatch({
      type : 'Module/del' ,
      payload: { values },
    });
  }

  const columns = [
    {
      title: 'Id',
      dataIndex: 'id',
      key: 'id',
      render: text => <a href="">{text}</a>,
    },
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Spell',
      dataIndex: 'spell',
    },
    {
      title: 'Operation',
      render: (text, record) => (
        <span className={styles.operation}>
          <ModuleEditModal record={record}>
            <a>Edit</a>
          </ModuleEditModal>
          <Popconfirm title="Confirm to delete?" onConfirm={deleteHandler.bind(null , record.id)}>
            <a href="">删除</a>
          </Popconfirm>
        </span>
      ),
    },
  ];

  const body = (
    <div className={styles.normal}>
      <div>
        <Table
          columns={columns}
          dataSource={dataSource}
          loading={loading}
          rowKey={record => record.id}
          pagination={false}
        />
        <Pagination
          className="ant-table-pagination"
          total={total}
          current={current}
          pageSize={PAGE_SIZE}
          onChange={pageChangeHandler}
        />
      </div>
    </div>
  );
  debugger;
  return body ;
}

function mapStateToProps(state) {
  const module = state.Module;
  debugger;
  return module ;
}

export default connect(mapStateToProps)(ModuleTable);
